<template>

    <div class="container">
        <div class="Search">


            <el-form
                    ref="form"
                    label-width="auto"
                    :label-position="'left'"
                    :size="'large'"
            >
                <el-form-item label="选择学期" v-loading="loading">
                    <el-radio-group v-model="radio" @change="changeSelect">
                        <el-radio v-for="item in semester.values()" :label="item" :key="item">{{ item }}</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="课程类型" v-loading="loading">
                    <el-radio-group v-model="currentCourseType" @change="changeSelectType">
                        <el-radio v-for="item in courseType.values()" :label="item" :key="item">{{ item }}</el-radio>
                    </el-radio-group>
                </el-form-item>

            </el-form>
        </div>

        <div>
            <!-- 显示Plan中的数据-->
            <div class="Plan">
                <el-scrollbar>
                    <el-table v-loading="loading" :data="currentPageCrouse" class="table">
                        <el-table-column width="150px" prop="courseid" label="课程编号"/>
                        <el-table-column width="200px" prop="coursename" label="课程名称"/>
                        <el-table-column width="150px" prop="assessmentmethod" label="考核方式"/>
                        <el-table-column width="200px" prop="coursesystem" label="课程类型"/>
                        <el-table-column width="150px" prop="courseattribute" label="课程属性"/>
                        <el-table-column width="160px" label="课程评价" v-slot="scope">
                            <el-button type="primary" size="small" datasrc="courseid"
                                       @click="getCrouseID(scope.row)">
                                查看
                            </el-button>
                        </el-table-column>
                    </el-table>
                </el-scrollbar>
            </div>
            <br>
            <div>
                <el-pagination
                        large
                        background
                        layout="prev, pager, next"
                        :total="Plan.length"
                        class="Plan"
                        @current-change="hanndlePageChange"
                />
            </div>
        </div>

        <el-drawer
                v-model="drawer"
                :title="currentCommentCrouseName"
                :before-close="handleCloseDrawer"
                size="60%"
        >
            <el-scrollbar style="margin-top: -30px">
                <el-table v-loading="commentLoading" :data="currentComment" class="table">
                    <el-table-column width="150px" prop="time" label="评论时间" sortable/>
                    <el-table-column width="730px" prop="comment" label="评论内容"/>
                </el-table>
            </el-scrollbar>
            <div class="input">
                <div class="inputComment">
                    <el-input v-model="inputComment" placeholder="请输入课程评价~"/>
                </div>
                <div class="inputSumbit">
                    <el-button type="primary" size="default" style="margin-top: 10px" @click="sumbitComment">
                        提交
                    </el-button>
                </div>
            </div>

        </el-drawer>

    </div>
</template>

<script lang="ts" setup>
import {ref, onMounted} from 'vue'
import axios from 'axios'
// import {CommonServerOptions} from 'vite'
import {ElMessageBox} from 'element-plus'

const size = ref('default')
const labelPosition = ref('right')
import Clipboard from 'clipboard';
import {ElMessage} from "element-plus";


const courseType = ref(['全部', '必修', '选修']);
const currentCourseType = ref('全部')
const currentComment = ref([])
const allComment = ref([])
const semester = ref([]);
const radio = ref()
let Plan = ref([])
let currentPageCrouse = ref([])
const AllPlan = ref([])
const pageNumber = ref(10)
const loading = ref(true)
const getCommentLoading = ref(false)
const drawer = ref(false)
const direction = ref('rtl')
const commentLoading = ref(false)
const handleCloseDrawer = (done: () => void) => {
    done()
}
const inputComment = ref('')
const currentCommentCrouseName = ref('课程评价')
const currentCommentSortByTimeDesc = ref(true)
let currentCourseID = ref('')
// 使用onMounted方法
onMounted(() => {
    if (localStorage.getItem('planRes') === null) {
        axios.get('api/getPlan', {}).then((res: any) => {
            if (res.data.status === 'success') {
                console.log(res.data)
                if (res.data.data.length === 0) {
                    return
                }
                localStorage.setItem('planRes', JSON.stringify(res));
                semester.value = res.data.key
                radio.value = semester.value[semester.value.length - semester.value.length]
                Plan.value = res.data.data[radio.value]
                currentPageCrouse.value = Plan.value.slice(0, pageNumber.value)
                AllPlan.value = res.data.data
                ElMessage({
                    message: '获取成功',
                    type: 'success',
                })
                loading.value = false
            }
        })

    } else {
        const res = JSON.parse(localStorage.getItem('planRes') as string)
        console.log(res)
        semester.value = res.data.key
        radio.value = semester.value[semester.value.length - semester.value.length]
        Plan.value = res.data.data[radio.value]
        currentPageCrouse.value = Plan.value.slice(0, pageNumber.value)
        AllPlan.value = res.data.data
        loading.value = false
    }

})


function changeSelect(event: any) {
    currentComment.value = []
    Plan.value = AllPlan.value[event]
    currentPageCrouse.value = Plan.value.slice(0, pageNumber.value)
    // 筛选出当前课程类型的课程
    if (currentCourseType.value !== '全部') {
        Plan.value = Plan.value.filter((item: any) => {
            return item.courseattribute === currentCourseType.value
        })
        currentPageCrouse.value = Plan.value.slice(0, pageNumber.value)
    }
}

function changeSelectType(event: any) {
    currentCourseType.value = event
    changeSelect(radio.value)
}

// create方法


function hanndlePageChange(val: number) {
    console.log(val)
    currentPageCrouse.value = Plan.value.slice((val - 1) * pageNumber.value, val * pageNumber.value)
}

function getID() {
    const cookies = document.cookie.split(';'); // 将所有 Cookie 拆分成数组
    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].trim().split('=');
        if (cookie[0] == 'id') {
            return cookie[1]
        }
    }
}


function getCrouseID(event: any) {
    currentComment.value = []
    currentCommentCrouseName.value = event.coursename
    currentCourseID = event.courseid
    commentLoading.value = true
    drawer.value = true
    axios.post('api/getcomment', {
        courseid: currentCourseID
    }).then(function (response) {
        console.log(response.data)
        allComment.value = response.data.data
        handleCurrentComment()
    }).catch(function (error) {
        console.log(error)
    })
}

function handleCurrentComment() {
    commentLoading.value = true
    // 按时间戳排序
    if (currentCommentSortByTimeDesc.value) {
        currentComment.value = allComment.value.sort((a: any, b: any) => {
            return new Date(b.time).getTime() - new Date(a.time).getTime()
        })
    } else {
        currentComment.value = allComment.value.sort((a: any, b: any) => {
            return new Date(a.time).getTime() - new Date(b.time).getTime()
        })
    }
    // time是时间戳格式，要除以 (10 ** 7)
    currentComment.value = allComment.value
    currentComment.value.forEach((item: any) => {
        item.time = new Date(item.time / (10 ** 4)).toLocaleString()
    })
    commentLoading.value = false
}

function changeCurrentCommentSortByTimeDesc() {
    currentCommentSortByTimeDesc.value = !currentCommentSortByTimeDesc.value
    handleCurrentComment()
}

function sumbitComment() {
    console.log(inputComment.value)
    axios.post('api/comment', {
        courseid: currentCourseID,
        crouse_name: currentCommentCrouseName.value,
        content: inputComment.value
    }).then(function (response) {
        console.log(response.data)
        if (response.data.status === 'success') {
            ElMessage({
                message: '提交成功,审核正在摸鱼...',
                type: 'success',
            })

            // 提交成功后，重新获取评论
            axios.post('api/getcomment', {
                courseid: currentCourseID
            }).then(function (response) {
                allComment.value = response.data.data
                handleCurrentComment()
            }).catch(function (error) {
                console.log(error)
            })

            inputComment.value = ''
        } else {
            ElMessage({
                message: '提交失败',
                type: 'error',
            })
        }
    }).catch(function (error) {
        console.log(error)
        ElMessage({
            message: '提交失败',
            type: 'error',
        })
    })

}

</script>

<style>
.el-radio-group {
    margin-right: 12px;
}

.container {
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    height: 100%;
}

.Search {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 10px;
}

.Plan {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
}

.inputComment {
    position: fixed;
    bottom: 0;
    right: 150px;
    padding: 10px;
    width: 18%;
}

.inputSumbit {
    position: fixed;
    bottom: 0;
    right: -80px;
    padding: 10px;
    width: 20%;
}

.input {
    float: left;
    margin-top: 30px;
}


/* 解决element-ui的table表格控件表头与内容列不对齐问题 */
.el-table th.gutter {
    display: table-cell !important;
}

</style>
